<template>
	<view class="main-content">
		<HeaderTop></HeaderTop>
		<view class="layout-side">
			<SiderBar></SiderBar>
			<view class="right-section">
				
				<HomePage v-if="currentMenu=='home'"></HomePage>
				<CoursePage v-if="currentMenu=='course'"></CoursePage>
				<ClassPage v-if="currentMenu=='class'"></ClassPage>
				<SupervisionPage v-if="currentMenu=='supervision'"></SupervisionPage>
				<AttendancePage v-if="currentMenu=='attendance'"></AttendancePage>
				<EvaluatePage v-if="currentMenu=='evaluate'"></EvaluatePage>
				<VideoPage v-if="currentMenu=='video'"></VideoPage>
			</view>
		</view>

	</view>
</template>

<script>
	import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
	import SiderBar from '../../components/SiderBar/SiderBar.vue'
	import HomePage from '../../components/pages/HomePage.vue'
	import CoursePage from '../../components/pages/CoursePage.vue'
	import ClassPage from '../../components/pages/ClassPage.vue'
	import SupervisionPage from '../../components/pages/SupervisionPage.vue'
	import AttendancePage from '../../components/pages/AttendancePage.vue'
	import EvaluatePage from '../../components/pages/EvaluatePage.vue'
	import VideoPage from '../../components/pages/VideoPage.vue'
	
	import  {mapState} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapState(['classId','baseImgURL','currentMenu'])
		},
		components:{
			HeaderTop,
			SiderBar,
			HomePage,
			CoursePage,
			ClassPage,
			SupervisionPage,
			AttendancePage,
			EvaluatePage,
			VideoPage
		}
		
	}
</script>

<style lang="scss">
	.layout-side {
		display: flex;
		justify-content: flex-start;
	}
.class-goods {
	padding: 11.72upx;
	padding-right:5upx;
	display: flex;
	justify-content: space-between;
	
	.column-col {
		width: 159.38upx;
		height: 100%;
		&.bg-home {
			background: url($imageurl+'/png_zuoyei.png') left top no-repeat;
			background-size: 100%;
		}
	}
	.orientation{
	  color: #fff;
	  width: 79.69upx;
	  height: 17.97upx;
	  font-size: 7.59upx;
	  padding-left: 11.72upx;
	  line-height: 17.97upx;
	  background:url($imageurl+'/title_bg.png') left top no-repeat;
	  background-size: cover;
	}
	.orientation-detail {
		height: 114upx;
		width: 95%;
		&.swiper-img {
			height: 70.13upx; 
			margin-bottom: 5upx;
		}
	}
	
	.slog-column {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 3.91upx;
		.small-box {
			width:48%;
			height:38.63upx;
			border-radius: 3.91upx;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;
			font-size: 8.59upx;
			color: #222222;
			text-align: left;
			padding-left: 4.91upx;
			box-sizing: border-box;
			background: #fff url($imageurl+'/sbg.png') left top no-repeat;
			background-size: cover;
			.min {
				font-size:6.59upx;
				padding-top:4upx;
			}
		}
	}
	.scroll-inner {
		display: flex;
	}
	.home-work {
		height:92.13upx;
		width: 159.38upx;
		line-height: 15.63upx;
		padding-top: 3.91upx;
		padding-left: 3.91upx;
	}
	.text-info {
		display: flex;
		color: #333;	
		font-size: 7.81upx;
		text { 
			width: 31.25upx;
			color: #888;
			
		}
	}
}
.notice-section {
	display: flex;
	padding-top: 11.72upx;
	
	.img-notice {
		    width: 143.81upx;
		    height: 110.52upx;
			margin-right: 7.81upx;
			image {
				border-radius: 3.91upx;	
			}
			
	}
	.menu-switch {
		display: flex;
		
		text { 
			flex: 1;
			display: inline-block;
			height:17.63upx;
			line-height: 17.63upx;
			text-align: center;
			font-size: 8.5upx;
			color: #666;
			border-radius: 2.34upx;
			&.actived {
				color: #333;
				background: #E2EBFD;
			}
		}
	}
	.outer {
		flex: 1;
		height:112.11upx;
		background: url($imageurl+'/bg_notice.png') left top no-repeat;
		background-size: 100%;
		border-radius: 2.34upx;
	}
	.switch-content {
		padding: 3.91upx;
		display: flex;
		flex-direction: column;
		line-height: 15.63upx;
		font-size: 7.81upx;
	}
}
	
</style>
